<template>
  <view @click="selectPopupClick()">
    <uni-easyinput
      type="text"
      v-model="currentForm[currentFildData.field]"
      :trim="true"
      class="form_item"
      :placeholder="currentFildData.placeholder ? currentFildData.placeholder : currentFildData.label"
      suffixIcon="down"
      :disabled="true" />
    <uni-popup ref="popupRef" background-color="#fff">
      <view class="select_popup_container">
        <IFexHeaderMain>
          <template #header>
            <uni-search-bar @confirm="confirmFun" :focus="true" v-model="searchText" clearButton="auto" cancelButton="none" />
          </template>
          <view class="select_popup_content">
            <scroll-view class="select_popup_scroll" scroll-y="true" @scroll="onScroll">
              <view v-for="(item, index) in currentFildData.dataList" class="select_popup_scroll_row" :class="{ acitve_row: currentValue == item.value }" @tap="onSumbitFun(item)" :key="index">
                <span>{{ item.text }}</span>
              </view>
            </scroll-view>
          </view>
        </IFexHeaderMain>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts" name="IFormSelect">
import { FieldListInterFace, FormDataInterFace } from '#/form/IForm';
import { computed, onMounted, PropType, ref } from 'vue';
import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue';
import useToastMsg from '@/hooks/sysMsg';
const props = defineProps({
  formField: {
    type: Object as PropType<FormDataInterFace>,
    required: true
  },
  currentFildData: {
    type: Object as PropType<FieldListInterFace>,
    required: true
  }
});
const searchText = ref<string>('');
const currentValue = ref<string>('');
const currentForm: FormDataInterFace = computed(() => props.formField);
const dataList = ref<any[]>([]);
const popupRef = ref();
const toastMsg = useToastMsg();
const selectPopupClick = () => {
  if (props.currentFildData.dataList && props.currentFildData.dataList.length > 0) {
    dataList.value = [...props.currentFildData.dataList];
    popupRef.value.open('bottom');
    currentValue.value = props.currentFildData.dataList ? props.currentFildData.dataList[0].value : '';
  } else {
    toastMsg.showToast('暂无数据');
  }
};
const confirmFun = () => {
  if (props.currentFildData.dataList) {
    dataList.value = props.currentFildData.dataList.filter((item: any) => item.text.includes(searchText.value));
  }
};
const onSumbitFun = (data: any) => {
  currentForm.value[props.currentFildData.field] = data.text;
  props.currentFildData.callback && props.currentFildData.callback(data, currentForm.value);
  currentValue.value = '';
  dataList.value = [];
  popupRef.value.close();
};
// 滚动事件处理函数
const onScroll = (e: any) => {
  const scrollTop = e.detail.scrollTop;
  const itemHeight = 44; // 每个选项的高度，根据实际情况调整
  const centerOffset = scrollTop; // 中心位置偏移量，根据实际情况调整
  const index = Math.floor(centerOffset / itemHeight);

  if (props.currentFildData.dataList && index >= 0 && index < props.currentFildData.dataList.length) {
    const selectedItem = props.currentFildData.dataList[index];
    currentValue.value = selectedItem.value;
  }
};
</script>
<style scoped lang="scss">
.form_item {
  background: #ffffff !important;
  ::v-deep .is-disabled {
    background: #ffffff !important;
    pointer-events: none;
    color: #666;
  }
}
.selectMultiple {
  padding: 20rpx;
}
.select_popup_container {
  .select_popup_content {
    .select_popup_scroll {
      max-height: 500rpx;
      min-height: 200rpx;
      position: relative; /* 为伪元素定位 */

      /* 添加伪元素实现渐变背景 */
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 1) 100%);
        z-index: 1; /* 确保伪元素在内容之上 */
        /* 允许鼠标事件穿透伪元素 */
        pointer-events: none;
      }
      .select_popup_scroll_row {
        position: relative;
        width: 100%;
        line-height: 40rpx;
        padding: 20rpx 0;
        font-size: 30rpx;
        box-sizing: border-box;
        text-align: center;
        color: #000000;

        &:last-child {
          border-bottom: none;
          margin-bottom: 180rpx;
        }

        &:first-child {
          margin-top: 180rpx;
        }
      }
      .acitve_row {
        color: #2d8dff;
        border-top: 1px solid rgba($color: #000000, $alpha: 0.05);
        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
      }
    }
  }
}
</style>
